<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>
        Ball Fussion » Load Awesome
    </title>
    <meta name="description" content="An awesome collection of — Pure CSS — Loaders and Spinners">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Ball Fussion » Load Awesome" />
    <meta property="og:url" content="http://github.danielcardoso.net/load-awesome/animations/ball-fussion.html" />
    <meta property="og:title" content="Ball Fussion » Load Awesome" />
    <meta property="og:description" content="An awesome collection of — Pure CSS — Loaders and Spinners" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/style.css" />
    <link rel="stylesheet" type="text/css" href="../assets/loaders.css" />
</head>
<body>
    <div class="wrapper nano" style="background-color: #79bbb5; color: #79bbb5;">
        <div class="nano-content">
            <!-- LOADERS_FORK_LINK -->
            <header class="absolute">
                <div class="la-docs-header-container">
                    <div class="left">
                        <h1 class="title">Load <span>Awesome</span></h1>
                    </div>
                    <div class="right text-right">
                        <!-- REMOVE_VIEW_HOME -->
                        <span class="buttongroup">
                            <a href="../" class="button button-circle">
                                Home
                            </a>
                            <a href="../animations.html" class="button button-circle active">
                                Animations
                            </a>
                        </span>
                        <!-- !REMOVE_VIEW_HOME -->
                    </div>
                    <div class="cf"></div>
                </div>
            </header>
            <main class="la-docs-social-sharing-container">
                <!-- REMOVE_VIEW_HOME -->
                <div class="la-docs-info-container text-left" style="margin: 0; padding: 10px 0 0;">
                    <h2 class="title">Ball Fussion <span>Awesome</span></h2>
                </div>
                <!-- !REMOVE_VIEW_HOME -->
                <!-- SOCIAL_BUTTONS -->
                <div class="social-sharing header__share-buttons" data-permalink="http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-fussion.html" data-permalink-github="danielcardoso/load-awesome">
                    <small class="social-sharing-title">Share: </small>
                    <!-- https://developers.facebook.com/docs/plugins/share-button/ -->
                    <a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-fussion.html" class="share-facebook">
                        <span class="fa fa-facebook"></span>
                        <span class="share-title">Share</span>
                        <span class="share-count">0</span>
                    </a>
                    <!-- https://dev.twitter.com/docs/intents -->
                    <a target="_blank" href="http://twitter.com/share?url=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-fussion.html&amp;text='Ball%20Fussion'%2C%20an%20awesome%20pure%20%23CSS%20%23Loader%20%23Animation" class="share-twitter">
                        <span class="fa fa-twitter"></span>
                        <span class="share-title">Tweet</span>
                        <span class="share-count">0</span>
                    </a>
                    <!-- https://developers.google.com/+/web/share/ -->
                    <a target="_blank" href="http://plus.google.com/share?url=http%3A%2F%2Fgithub.danielcardoso.net%2Fload-awesome%2Fanimations%2Fball-fussion.html" class="share-google">
                        <!-- Cannot get Google+ share count with JS yet -->
                        <span class="fa fa-google-plus"></span>
                        <span class="share-title">+1</span>
                        <span class="share-count">0</span>
                    </a>
                    <span>
                        <a class="twitter-follow-button" href="https://twitter.com/DanielCardoso" data-show-count="true" data-lang="en">
                        Follow @DanielCardoso
                        </a>
                        <script>
                        window.twttr = (function(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0],
                                t = window.twttr || {};
                            if (d.getElementById(id)) return t;
                            js = d.createElement(s);
                            js.id = id;
                            js.src = "https://platform.twitter.com/widgets.js";
                            fjs.parentNode.insertBefore(js, fjs);
                            t._e = [];
                            t.ready = function(f) {
                                t._e.push(f);
                            };
                            return t;
                        }(document, "script", "twitter-wjs"));
                        </script>
                    </span>
                </div>
                <!-- !SOCIAL_BUTTONS -->
            </main>
            <!-- REMOVE_VIEW_HOME -->
            <main class="no-padding-bottom">
                <a href="ball-fall.html" class="la-docs-prev-next la-docs-goto-prev">
                    <i class="fa fa-angle-left"></i>
                    <span>Ball Fall</span>
                </a>
                <a href="ball-grid-beat.html" class="la-docs-prev-next la-docs-goto-next">
                    <i class="fa fa-angle-right"></i>
                    <span>Ball Grid Beat</span>
                </a>
                <div class="items showroom auto-height title">
                    <div class="item">
                        &nbsp;
                    </div>
                    <div class="item bg-light">
                        <h2>Dark</h2>
                    </div>
                    <div class="item">
                        <h2>Normal</h2>
                    </div>
                    <div class="item bg-light">
                        <h2>Custom</h2>
                    </div>
                </div>
                <div class="items showroom auto-height">
                    <div class="item">
                        <h3>Small</h3>
                    </div>
                    <div class="item bg-light">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fussion la-dark la-sm">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fussion la-sm">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                    <div class="item bg-light">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div style="color: #fdacb4" class="la-ball-fussion la-sm">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                </div>
                <div class="items showroom auto-height">
                    <div class="item">
                        <h3>Default</h3>
                    </div>
                    <div class="item bg-light">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fussion la-dark">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fussion">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                    <div class="item bg-light">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div style="color: #f6d860" class="la-ball-fussion">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                </div>
                <div class="items showroom auto-height">
                    <div class="item">
                        <h3>2X</h3>
                    </div>
                    <div class="item bg-light">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fussion la-dark la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fussion la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                    <div class="item bg-light">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div style="color: #f68f6f" class="la-ball-fussion la-2x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                </div>
                <div class="items showroom auto-height">
                    <div class="item">
                        <h3>3X</h3>
                    </div>
                    <div class="item bg-light">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fussion la-dark la-3x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div class="la-ball-fussion la-3x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                    <div class="item bg-light">
                        <div class="item-inner">
                            <div class="item-loader-container">
                                <div style="color: #f4696b" class="la-ball-fussion la-3x">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="item-title">
                            <button type="button" data-type="la-docs-modal-trigger">
                                <i class="fa fa-eye"></i>
                                View Source
                            </button>
                        </div>
                    </div>
                </div>
            </main>
            <main class="configuration">
                <h2>Usage</h2>
                <h3>HTML</h3>
                <pre><code class="language-markup">&lt;div class="la-ball-fussion"&gt;
	&lt;div&gt;&lt;/div&gt;
	&lt;div&gt;&lt;/div&gt;
	&lt;div&gt;&lt;/div&gt;
	&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
                <h3>CSS</h3>
                <pre><code class="language-css">/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso &lt;@DanielCardoso&gt;
 * Licensed under MIT
 */
.la-ball-fussion,
.la-ball-fussion &gt; div {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-ball-fussion {
    display: block;
    font-size: 0;
    color: #fff;
}
.la-ball-fussion.la-dark {
    color: #333;
}
.la-ball-fussion &gt; div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-ball-fussion {
    width: 8px;
    height: 8px;
}
.la-ball-fussion &gt; div {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-animation: ball-fussion-ball1 1s 0s ease infinite;
       -moz-animation: ball-fussion-ball1 1s 0s ease infinite;
         -o-animation: ball-fussion-ball1 1s 0s ease infinite;
            animation: ball-fussion-ball1 1s 0s ease infinite;
}
.la-ball-fussion &gt; div:nth-child(1) {
    top: 0;
    left: 50%;
    z-index: 1;
}
.la-ball-fussion &gt; div:nth-child(2) {
    top: 50%;
    left: 100%;
    z-index: 2;
    -webkit-animation-name: ball-fussion-ball2;
       -moz-animation-name: ball-fussion-ball2;
         -o-animation-name: ball-fussion-ball2;
            animation-name: ball-fussion-ball2;
}
.la-ball-fussion &gt; div:nth-child(3) {
    top: 100%;
    left: 50%;
    z-index: 1;
    -webkit-animation-name: ball-fussion-ball3;
       -moz-animation-name: ball-fussion-ball3;
         -o-animation-name: ball-fussion-ball3;
            animation-name: ball-fussion-ball3;
}
.la-ball-fussion &gt; div:nth-child(4) {
    top: 50%;
    left: 0;
    z-index: 2;
    -webkit-animation-name: ball-fussion-ball4;
       -moz-animation-name: ball-fussion-ball4;
         -o-animation-name: ball-fussion-ball4;
            animation-name: ball-fussion-ball4;
}
.la-ball-fussion.la-sm {
    width: 4px;
    height: 4px;
}
.la-ball-fussion.la-sm &gt; div {
    width: 6px;
    height: 6px;
}
.la-ball-fussion.la-2x {
    width: 16px;
    height: 16px;
}
.la-ball-fussion.la-2x &gt; div {
    width: 24px;
    height: 24px;
}
.la-ball-fussion.la-3x {
    width: 24px;
    height: 24px;
}
.la-ball-fussion.la-3x &gt; div {
    width: 36px;
    height: 36px;
}
/*
 * Animations
 */
@-webkit-keyframes ball-fussion-ball1 {
    0% {
        opacity: .35;
    }
    50% {
        top: -100%;
        left: 200%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 100%;
        z-index: 2;
        opacity: .35;
    }
}
@-moz-keyframes ball-fussion-ball1 {
    0% {
        opacity: .35;
    }
    50% {
        top: -100%;
        left: 200%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 100%;
        z-index: 2;
        opacity: .35;
    }
}
@-o-keyframes ball-fussion-ball1 {
    0% {
        opacity: .35;
    }
    50% {
        top: -100%;
        left: 200%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 100%;
        z-index: 2;
        opacity: .35;
    }
}
@keyframes ball-fussion-ball1 {
    0% {
        opacity: .35;
    }
    50% {
        top: -100%;
        left: 200%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 100%;
        z-index: 2;
        opacity: .35;
    }
}
@-webkit-keyframes ball-fussion-ball2 {
    0% {
        opacity: .35;
    }
    50% {
        top: 200%;
        left: 200%;
        opacity: 1;
    }
    100% {
        top: 100%;
        left: 50%;
        z-index: 1;
        opacity: .35;
    }
}
@-moz-keyframes ball-fussion-ball2 {
    0% {
        opacity: .35;
    }
    50% {
        top: 200%;
        left: 200%;
        opacity: 1;
    }
    100% {
        top: 100%;
        left: 50%;
        z-index: 1;
        opacity: .35;
    }
}
@-o-keyframes ball-fussion-ball2 {
    0% {
        opacity: .35;
    }
    50% {
        top: 200%;
        left: 200%;
        opacity: 1;
    }
    100% {
        top: 100%;
        left: 50%;
        z-index: 1;
        opacity: .35;
    }
}
@keyframes ball-fussion-ball2 {
    0% {
        opacity: .35;
    }
    50% {
        top: 200%;
        left: 200%;
        opacity: 1;
    }
    100% {
        top: 100%;
        left: 50%;
        z-index: 1;
        opacity: .35;
    }
}
@-webkit-keyframes ball-fussion-ball3 {
    0% {
        opacity: .35;
    }
    50% {
        top: 200%;
        left: -100%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 0;
        z-index: 2;
        opacity: .35;
    }
}
@-moz-keyframes ball-fussion-ball3 {
    0% {
        opacity: .35;
    }
    50% {
        top: 200%;
        left: -100%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 0;
        z-index: 2;
        opacity: .35;
    }
}
@-o-keyframes ball-fussion-ball3 {
    0% {
        opacity: .35;
    }
    50% {
        top: 200%;
        left: -100%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 0;
        z-index: 2;
        opacity: .35;
    }
}
@keyframes ball-fussion-ball3 {
    0% {
        opacity: .35;
    }
    50% {
        top: 200%;
        left: -100%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 0;
        z-index: 2;
        opacity: .35;
    }
}
@-webkit-keyframes ball-fussion-ball4 {
    0% {
        opacity: .35;
    }
    50% {
        top: -100%;
        left: -100%;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 50%;
        z-index: 1;
        opacity: .35;
    }
}
@-moz-keyframes ball-fussion-ball4 {
    0% {
        opacity: .35;
    }
    50% {
        top: -100%;
        left: -100%;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 50%;
        z-index: 1;
        opacity: .35;
    }
}
@-o-keyframes ball-fussion-ball4 {
    0% {
        opacity: .35;
    }
    50% {
        top: -100%;
        left: -100%;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 50%;
        z-index: 1;
        opacity: .35;
    }
}
@keyframes ball-fussion-ball4 {
    0% {
        opacity: .35;
    }
    50% {
        top: -100%;
        left: -100%;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 50%;
        z-index: 1;
        opacity: .35;
    }
}
</code></pre>
            </main>
            <!-- !REMOVE_VIEW_HOME -->
            <main class="la-docs-footer">
                <footer>
                    <ul class="la-docs-footer-links">
                        <li>
                            Load Awesome 1.1.0
                        </li>
                        <li>·</li>
                        <li>Created by <a href="https://twitter.com/DanielCardoso" target="_blank">@DanielCardoso</a></li>
                        <li>·</li>
                        <li>Licensed under
                            <a rel="license" href="https://github.com/danielcardoso/load-awesome/blob/master/LICENSE" target="_blank">
                                MIT
                            </a>
                        </li>
                    </ul>
                    <ul class="la-docs-footer-links">
                        <li><a href="https://github.com/danielcardoso/load-awesome" target="_blank">GitHub Project</a></li>
                        <li>·</li>
                        <li><a href="https://github.com/danielcardoso/load-awesome/blob/master/CHANGELOG" target="_blank">Changelog</a></li>
                        <li>·</li>
                        <li><a href="https://github.com/danielcardoso/load-awesome/issues" target="_blank">Issues</a></li>
                        <li>·</li>
                        <li><a href="https://github.com/danielcardoso/load-awesome/releases" target="_blank">Releases</a></li>
                    </ul>
                </footer>
            </main>
        </div>
    </div>
    <!-- REMOVE_VIEW_HOME -->
    <div class="la-docs-modal">
        <div class="la-docs-modal-body">
            <h3>HTML Markup</h3>
            <div class="la-docs-modal-content"></div>
            <button type="button" class="la-docs-modal-close">Close Me!</button>
        </div>
    </div>
    <div class="la-docs-modal-dropdown"></div>
    <!-- !REMOVE_VIEW_HOME -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../assets/plugins.min.js"></script>
    <script src="../assets/script.min.js"></script>
</body>
</html>